<template>
  <top-nav :message="viewMessage"></top-nav>
  <div class="phoneNumber">
    <p>手机号码：</p>
    <input type="text" v-model="this.enrollInfo.phone">
  </div>
  <div class="password">
    <p>密码：</p>
    <input type="password" v-model="this.enrollInfo.password">
  </div>
  <div class="confirmPassword">
    <p>确认密码：</p>
    <input type="password" v-model="this.confirmPassword">
  </div>
  <div class="sex">
    <p>性别：</p>
    <input type="radio" id="boy" name="boy" value="boy" checked>
    <label for="boy">男</label>
    <input type="radio" id="girl" name="girl" value="girl">
    <label for="girl">女</label>
  </div>
  <button class="enroll" @click="toLogin">注册</button>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
import BottomNav from "@/components/BottomNav.vue";
import request from "@/request";
import qs from "qs";

export default {
  name:"EnrollView",
  components:{
    TopNav,
    BottomNav,
  },
  data(){
    return{
      viewMessage:"用户注册",
      enrollInfo:{
        phone:null,
        password:null,
        sex:"男"?1:0,
      },
      confirmPassword:null,
    }
  },
  methods:{
    toLogin(){
      if (this.enrollInfo.phone == null || this.enrollInfo.password==null || this.enrollInfo.sex == null) {
        confirm("请完善信息！")
      }else if(/^[0-9]{11}$/.test(this.enrollInfo.phone)){
        confirm("手机号码格式错误！")
      }else if(this.enrollInfo.password != this.confirmPassword){
        confirm("两次密码输入不一致！")
      }
      request({
        method:"post",
        url:"/customer/register",
        data:qs.stringify(this.enrollInfo),
      }).then((respData) => {
        if(respData.code == 200){
          this.$router.push({path:"/login"})
          alert("注册成功！");
        }else{
          alert(respData.msg);
        }
      }).catch((error) => {
        console.error(error)
      })
    },
    goBack(){
      this.$router.go(-1);
    }
  },
}
</script>

<style scoped>
input:focus{
  outline: none;
}
input{
  border: none;
  font-size: 3vw;
  width: 81%;
  margin-right: 0;
}
.phoneNumber{
  width: 94%;
  display: flex;
  justify-content: space-between;
  color: gray;
  margin: 5vw auto;
  font-size: 3vw;
  font-weight: bold;
}
.password{
  width: 94%;
  display: flex;
  justify-content: space-between;
  color: gray;
  margin: 5vw auto;
  font-size: 3vw;
  font-weight: bold;
}
.confirmPassword{
  width: 94%;
  display: flex;
  justify-content: space-between;
  color: gray;
  margin: 5vw auto;
  font-size: 3vw;
  font-weight: bold;
}
.sex{
  width: 94%;
  display: flex;
  margin: 5vw auto 2vw auto;
  font-size: 3vw;
}
.sex p{
  margin-right: 5vw;
  color: gray;
  font-weight: bold;
}
.sex input{
  width: 8%;
}
.enroll{
  height: 10vw;
  width: 94%;
  background-color: #38CA73;
  border: none;
  border-radius: 4px;
  margin: 2% 3%;
  color: white;
  font-size: 3.8vw;
  font-weight: bold;
}
</style>